<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品详情</title>
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/api.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/aui.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/swiper.min.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/base.css"/>
  <link rel="stylesheet" href="/static/admin/jingtaiwu/commodityDetails.css">
</head>
<style>
  
  .fixed-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      background: white;
      box-shadow: 0 -0.02rem 0.1rem 0 rgba(222, 228, 234, 0.8);
      padding: 0 15px;
    }

    .fixed-bottom img {
      width: 34px;
      height: 34px;
    }

    .fixed-bottom .info {
      flex: 1;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      height: 34px;
      margin-left: 10px;
    }

    .info .info-top {
      color: #3B3B3B;
      font-size: 13px;
    }

    .info .info-bottom {
      color: #989898;
      font-size: 11px;
    }

    .btn-download {
      width: 70px;
      height: 29px;
      text-align: center;
      line-height: 29px;
      background: #F96B47;
      border-radius: 14.5px;
      color: #FFFFFF;
      font-size: 12px;
    }
</style>
<body>
<div id="app" v-cloak>
  <div class="swiper-container" id="banner">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-if="info.p_video">
        <!-- <video :src="info.p_video" class="video" controls="controls"></video> -->
        <!-- cover | fill -->
        <video :src="info.p_video" style="width: 100%; height: 100%; object-fit: cover"  :poster="info.p_video | videoCover"></video>
        <img src="/static/admin/jingtaiwu/bo.png" class="play">
      </div>
      <div class="swiper-slide">
        <img :src="item" alt="" v-for="(item,index) in bannerList" :key="index">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  <div class="area1">
    <div class="product-name">
      <span class="tip" v-if="info.p_deliver_cate===1">全国包邮</span>
      <span class="tip" v-else-if="info.p_deliver_cate===2">到店自提</span>
      <span class="tip" v-else-if="info.p_deliver_cate===3">邮费{{info.p_postage}}元</span>
      <span class="tip" v-else-if="info.p_deliver_cate===4">到店消费</span>
      {{info.p_name}}
    </div>
    <div class="line1 flex content-justify">
      <div class="flex items-base">
        <template v-if="info.p_type!==1">
          <img src="/static/admin/jingtaiwu/task2/jf.png" alt="" class="icon-money">
          <div class="flex items-base">
            <span class="price">{{info.p_jifen_price}}</span>
            <span class="unit">积分</span>
          </div>
        </template>
        <template v-if="info.p_type===3">
          <div class="flex items-end">
            <span class="add">+</span>
          </div>
        </template>
        <template v-if="info.p_type!==2">
          <div class="flex items-base">
            <span class="unit">￥</span>
            <span class="price">{{info.p_now_price}}</span>
          </div>
        </template>
      </div>
      <div class="btn-share" >
        <img src="/static/admin/jingtaiwu/task2/share.png" alt="" class="icon-share">
        <span>分享</span>
      </div>
    </div>
    <div class="line3 flex items-base" v-if="info.p_type===1">
      <img src="/static/admin/jingtaiwu/task2/jf.png" alt="" class="icon-money">
      <span>购买立得{{info.p_give}}积分</span>
    </div>
    <div class="line2 flex items-center content-justify">
      <div>
        <span class="style">消费方式:</span>
        <span class="style2" v-if="info.p_deliver_cate===1">全国包邮</span>
        <span class="style2" v-else-if="info.p_deliver_cate===2">到店自提</span>
        <span class="style22" v-else-if="info.p_deliver_cate===3">邮费{{info.p_postage}}元</span>
        <span class="style2" v-else-if="info.p_deliver_cate===4">到店消费</span>
      </div>
      <span class="sold-num">月销: {{info.p_sell_yet}}笔</span>
    </div>
  </div>
  <div class="area2 flex items-center content-justify" v-if="info.p_model===2" >
    <div>购买类型</div>
    <img src="/static/admin/jingtaiwu/task2/right.png" alt="" class="icon-right">
  </div>
  <div class="area3">
    <div class="line1">
      <div class="title1">服务</div>
      <div class="flex items-center content-justify">
        <span class="service-item" v-for="(item,index) in equityList" :key="index">
          <img src="/static/admin/jingtaiwu/task2/checkbox.png" alt="" class="icon-check">
          <span class="service-name">{{item}}</span>
        </span>
      </div>
    </div>
    <div class="line2" v-if="info.p_type ===2">
      <div class="title1">限购</div>
      <div>
        <span class="tip1" v-if="info.p_buy_limit">每位用户限购{{info.p_buy_limit}}件</span>
        <span class="tip1" v-else>每位用户不限数量</span>
        <span class="tip2">(积分商品不可退单)</span>
      </div>
    </div>
  </div>
  <div class="area4">
    <img :src="info.shop_img" alt="" class="shop-img">
    <div class="shop-info">
      <div class="shop-name">{{info.shop_name}}</div>
      <div class="shop-address">{{info.shop_address}}</div>
    </div>
    <div class="btn" >进店逛逛</div>
  </div>
  <div class="area5">
    <div class="comment-area flex items-center content-justify">
      <div class="comment-num">评价({{commentCount}})</div>
      <div class="more-comment" >查看全部 ></div>
    </div>
    <div class="tip-title">店铺推荐</div>
    <div class="product-list">
      <div class="product-item" v-for="item in recommend" :key="item.p_id" >
        <img :src="item.p_banner.split(',')[0]" alt="" class="product-img">
        <div class="product-info">
          <div class="product-name aui-ellipsis-2">
            <span class="tag" v-if="item.p_deliver_cate===1">全国包邮</span>
            <span class="tag" v-else-if="item.p_deliver_cate===2">到店自提</span>
            <span class="tag" v-else-if="item.p_deliver_cate===3">邮费{{item.p_postage}}元</span>
            <span class="tag" v-else-if="item.p_deliver_cate===4">到店消费</span>
            {{item.p_name}}
          </div>
          <div class="product-price flex items-base aui-ellipsis">
            <template v-if="item.p_type!==1">
              <img src="/static/admin/jingtaiwu/task2/jf.png" alt="" class="icon-money" style="display: inline-block">
              <span class="inline-flex items-base">
                <span class="price">{{item.p_jifen_price}}</span>
                <span class="unit">积分</span>
              </span>
            </template>
            <template v-if="item.p_type===3">
              <span class="inline-flex items-end">
                <span class="add">+</span>
              </span>
            </template>
            <template v-if="item.p_type!==2">
              <div class="inline-flex items-base">
                <span class="unit">￥</span>
                <span class="price">{{item.p_now_price}}</span>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="area6">
    <div class="tip-title">图文详情</div>
    <div class="rich-text" v-html="richtext"></div>
  </div>
  <div class="fixed-bottom">
    <img src="https://jintianjifen.oss-cn-shanghai.aliyuncs.com/f53953806ed6e7296fc76890aff4b7c9.jpg" alt="">
    <div class="info">
      <div class="info-top">支分宝</div>
      <div class="info-bottom">支分宝享品质生活</div>
    </div>
    <div class="btn-download" onclick="tz()">立即下载</div>
  </div>
</div>
<script type="text/javascript" src="/static/admin/jingtaiwu/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/swiper.min.js"></script>
<script src="/static/admin/jingtaiwu/vue.min.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/common1.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/swiper.min.js"></script>
<!--<script src="/static/admin/jingtaiwu/vconsole.min.js"></script>-->
<script>
  var vm;
  // var vConsole = new VConsole();
  vm = new Vue({
    el: "#app",
    data: function() {
      return {
        p_id: 1425,
        info: {},// 商品信息
        bannerList: [],// 轮播图
        equityList: [],// 服务列表
        richtext: "",
        recommend: [],// 推荐店铺
        commentCount: 0,// 评论数量
        models: []
      };
    },
    methods: {
      ShopDetails: function() {
        var _this = this;
        var data = {
          values: {
            p_id: this.p_id
          }
        };
        postAjax(ApiUrl.apiusergoodsDetail, data, function (ret, err) {
          if (ret && ret.status === 200) {
            var newData = ret.msg
            _this.info = newData.goods;
            _this.bannerList = newData.goods.p_banner.split(",");
            _this.equityList = newData.goods.p_equity.split(",");
            _this.richtext = newData.goods.p_content.split(",,,,,").join("");
            _this.recommend = newData.arr;
            _this.commentCount = newData.count;
            _this.models = newData.model;
            if (api.pageParam.showModel) {
              _this.selectModel()
            }
            _this.$nextTick(function () {
              if (!_this.mySwiper) {
                _this.mySwiper = new Swiper("#banner", {
                  loop: _this.bannerList.length > 1,
                  pagination: {
                    el: '#banner .swiper-pagination',
                    bulletClass: 'my-bullet',
                    bulletActiveClass: 'my-bullet-active'
                  }
                })
              }
            })
          }
        });
      }
    },
    created:function(){
      var _self = this;
      this.p_id = getQueryVariable("id");
      _self.ShopDetails();
    },
    mounted: function() {

    }
  });
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return false;
  }

  function tz() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      var loadDateTime = new Date();
      window.location.href = "jintianjifen://productDetail?type=1&id="+getQueryVariable("id")
      window.setTimeout(function () {
        var timeOutDateTime = new Date();
        if (timeOutDateTime - loadDateTime < 5000) {
          window.location = 'itms-apps://itunes.apple.com/cn/app/wei/id1468418168';
        } else {
          window.close();
        }
      }, 2000);
    } else {
      window.location.href = "jintianjifen://productDetail?type=1&id="+getQueryVariable("id")
      window.setTimeout(function () {
        window.location.href = 'https://h5coml.vivo.com.cn/h5coml/appdetail_h5/browser_v2/index.html?appId=2809701&resource=301&source=2';
      }, 2000);
    }
  }
</script>
</body>
</html>
